import { MaterialIcons } from 'taro-icons';
import Taro, { useRouter } from '@tarojs/taro';
import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView } from '@tarojs/components';

import NineImage from '../../components/NineImage';
import PageHeader from '../../components/pageHeader';
import { useAppContext } from '../../contexts/AppContext';
import ProcessTitle from '../../components/processStep/processTitle';
import ProcessStatus from '../../components/processStep/processStatus';
import { CompleteButton, NextButton } from '../../components/processStep/processButton';
import { getUserProgressStepApi, setUserProgressStepStatusApi } from '../../api/myself';

import '../user-study-time/index.scss';


// 约考科一页面组件
const UserSubject1Appoint: React.FC = () => {
  const router = useRouter();
  const stepId = Number(router.params.stepId || 6);
  const [userStep, setUserStep] = useState<{ id: number; name: string; status: number, completed_time: string }>({ 
    id: 0, 
    name: '', 
    status: 0, 
    completed_time: '' 
  });
  const [showTextContent, setShowTextContent] = useState("image");
  const { setCarSubjectStepProcessStatus } = useAppContext();

  // 获取用户进度
  useEffect(() => {
    const fetchUserProgress = async () => {
      if (stepId) {
        try {
          const res = await getUserProgressStepApi(Number(stepId));
          if (res.code === 200 && res.data && res.data.length === 1) {
            const result = res.data[0];
            setUserStep({
              id: Number(stepId),
              name: result.name,
              status: result.status,
              completed_time: result.created_at
            });
          }
        } catch (error) {
          console.log(error);
          Taro.showToast({
            title: '获取用户进度失败',
            icon: 'none',
            duration: 2000
          });
        }
      }
    };

    fetchUserProgress();
  }, [stepId]);

  // 更新步骤状态
  const updateStepStatus = async () => {
    try {
        const res = await setUserProgressStepStatusApi(stepId, 1);
        if (res.code === 200) {
          setUserStep({
            ...userStep,
            status: 2
          });
          Taro.showToast({
            title: '约考科一已完成~',
            icon: 'success',
            duration: 2000
          });
          setCarSubjectStepProcessStatus(stepId, 1);
        }
    } catch (error) {
      console.error('更新步骤状态失败:', error);
      Taro.showToast({
        title: '操作失败，请稍后重试~',
        icon: 'none',
        duration: 2000
      });
    }
  };

  const nextStep = () => {
    Taro.navigateTo({ url: `/pages/user-subject-pass/index?stepId=${stepId+1}&tab=1` });
  }

  return (
    <View className="page-container study-time-container">
      <PageHeader title="约考科目一" />
      {userStep.completed_time && (
        <ProcessStatus title="约考科目一" createTime={userStep.completed_time} />
      )}
      
      <ScrollView className="study-time-content-container" scrollY>
        <View className="main-card">
          <ProcessTitle 
            content="约考科目一" 
            setShowTextContent={setShowTextContent} 
            showTextContent={showTextContent} />

          {/* 学习步骤 */}
          <View className="study-time-steps">
            {showTextContent === 'image' && (
              <NineImage images={null} stepId={stepId} />
            )}
            {showTextContent === 'text' && (
              <View className="steps-list">
                <View className="step-item">
                  <Text className="step-time-number">1</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>微信搜索
                        <Text className='importance-text'>上海计时驾培服务平台</Text> 
                      </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">2</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>点击
                        <Text className='importance-text'>学员入口</Text>
                      </View>
                      <View>进入<Text className='importance-text'>学员登录页面</Text>
                      </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">3</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>输入
                        <Text className='importance-text'>学员编号、密码和验证码</Text> 
                      </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">4</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>查看手机短信获取
                        <Text className='importance-text'>学员编号</Text> 
                      </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">5</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>打开摄像头进行
                        <Text className='importance-text'>人脸识别</Text> 
                      </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">6</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>确认所有科一理论学时</View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">7</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>再次进行
                        <Text className='importance-text'>人脸识别</Text>确认
                      </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">8</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>确认科一理论学时汇总</View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">9</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>点击
                        <Text className='importance-text'>各科目学时汇总</Text>
                      </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">10</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>下载并打开
                        <Text className='importance-text'>交管12123</Text>
                      </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">11</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>进入
                        <Text className='importance-text'>考试预约</Text>页面
                      </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">12</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>选择合适的考场</View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">13</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>选择合适的考试时间 </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">14</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>等待系统受理预约请求</View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">15</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>点击
                      <Text className='importance-text'>缴费</Text>并成功缴费
                    </View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">16</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                      <View>确认并完成所有费用缴纳</View>
                    </View>
                  </View>
                </View>
                <View className="step-item">
                  <Text className="step-time-number">17</Text>
                  <View className="step-content">
                    <View className="step-image-container">
                        <View>预约成功，等待考试</View>
                    </View>
                  </View>
                </View>
              </View>
            )}
          </View>

          {/* 底部按钮 */}
          <View className="button-container">
            {userStep.status === 1 && (
              <NextButton onClick={nextStep}/>
            )}
            {userStep.status === 0 && (
              <CompleteButton content="完 成 约 考" onClick={updateStepStatus}/>
            )}
          </View>

          {/* 特别注意 */}
          <View className="study-time-notice">
            <View className="notice-title">
              <MaterialIcons name="info" color="#e6a23c" className="mr-2" size={16} />
              <Text className="notice-title-text text-lg">特别注意</Text>
            </View>
            <View className="notice-content">
              <Text className='text-md'>1. 人脸识别请确保光线充足，面部清晰可见。</Text>
              <Text className='text-md'>2. 约考成功后，请及时缴纳考试费用。</Text>
              <Text className='text-md'>3. 考试前请提前到达考场，携带有效身份证件。</Text>
              <Text className='text-md'>4. 考试当天请保持手机畅通，以便接收重要通知。</Text>
            </View>
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

export default UserSubject1Appoint;